import React from 'react'
import { Tag, Input, Button } from 'antd'
import { connect } from 'umi'
import MyUpLoad from '@/components/upload/UpLoad'

type Props = {
  index: number,
  name: string,
  dispatch: any
}

function SkinCard({ index, name, dispatch }: Props) {
  return (
    <div className='banner_box'>
      <div className='banner_card'>
        <Tag className='p3' color="blue">皮肤{ index + 1 }</Tag>

        <div className='banner_flex mt15'>
          <span className='w100'>皮肤名称：</span>
          <Input value={ name } onChange={(ev) => {
            dispatch({ type: "hero/setProps", val: ev.target.value, skins: true, prop: "name", index })
          }}/>
        </div>

        <div className='banner_flex mt15'>
          <span className='w80'>皮肤图片：</span>
          <MyUpLoad url='/api/upload/skin'
                    index={index}
                    prop="img"
                    skins={true}
                    type='hero/setProps'/>
        </div>

        <div className='banner_flex mt15'>
          <Button onClick={() => {
              dispatch({ type: "hero/delSkins", index, action: "skins" })
          }} type="primary" danger>删除皮肤</Button>
        </div>
      </div>
    </div>
  )
}

const mapStateToProps = (state: any) => {
  const { hero } = state
  return {
    hero
  }
}

export default connect(mapStateToProps)(SkinCard)